<style type="text/css">
    @media (orientation: landscape){
        div#memberListContainer>div{
            width: 33.3%;
        }
        .memberIMG{
            max-height: 170px;
        }
    }
    @media (orientation: portrait){
        div#memberListContainer>div{
            width: 50%;
        }
        .memberIMG{
            max-height: 120px;
        }
    }
    div#memberListContainer>div{
        position: relative;
        height: 200px;
        box-sizing: border-box;
        float: left;
        border-radius: 5px;
        padding: 5px;
    }
    memberIcon{
        /*border: 1px solid #bbb;*/
        width: 100%;
        height: 100%;
        display: block;
        vertical-align: middle;
    }
    memberIcon:hover{
        /*background-color: #fff;*/
    }
    #structureContent{
        vertical-align: top;
    }
    .coopName{
        position: absolute;
        text-align: right;
        font-weight: normal;
        font-size: 70%;
        color: #888;
        bottom: 5px;
        right: 10px;
        height: 25px;
        overflow: hidden;
    }
</style>
<div class="input-group input-group-normal"
    style="
        margin-left: auto;
        margin-top: 5px;
        width: 50%;
    "
    >
    <span class="input-group-addon">
        <span class="glyphicon glyphicon glyphicon-search" aria-hidden="true"></span>
    </span>
    <input type="text" class="form-control" placeholder="ค้นหา เกษตรกร" onkeyup="memberListContainer($(this).val())" autofocus="">
</div>
<div id="memberListContainer" style="margin-left: auto;margin-right: auto;"></div>
<div id="registButton"
    onclick="window.open('?page=member/memberRegist','_self');"
    style="
        position: fixed;
        background-color: #A1D1FF;
        border-radius: 100px;
        color: #fff;
        width: 70px;
        height: 70px;
        bottom: 10px;
        right: 10px;
        cursor: pointer;
        box-shadow: 1px 1px 3px #000;
        ">
    <table class="noSpacing" style="width:100%;height: 100%;">
        <tr>
            <td style="text-align: center;vertical-align: middle;font-size: 30px">
                <img src="img/add.png" height="40">
            </td>
        </tr>
    </table>
</div>
<script type="text/javascript">
    function memberListContainer(keyword){
        $.post('member/memberListContainer.php',{
            keyword: keyword
        },function(data){
            $('#memberListContainer').html(data);
        });
    }
    $('document').ready(function(){
        $('mainmenu').on('touchstart', function(){
            $(this).css('background-color','#059fe7');
        }).on('touchend',function(){
            $(this).css('background-color','');
        }).on('touchmove',function(){
            $(this).css('background-color','');
        }).on('mousedown',function(){
            $(this).css('background-color','#059fe7');
        }).on('mouseup',function(){
            $(this).css('background-color','');
        });
        memberListContainer();
    });
</script>